import React, { FC, useState } from 'react'
import { useRouter } from 'next/dist/client/router'
import Link from 'next/link'
import CloseIcon from './icon/close'
import MenuIcon from './icon/menu'

export type MainNavProps = {
  className?: string
}

export const menuItems = [
  {
    id: 'index',
    title: '首页',
    href: '/',
  },
  {
    id: 'posts',
    title: '文章',
    href: '/posts',
  },
  // {
  //   id: 'works',
  //   title: '作品',
  //   href: '/works',
  // },
  {
    id: 'about',
    title: '关于',
    href: '/about',
  },
]

const MainNav: FC<MainNavProps> = ({ className = '' }) => {
  const router = useRouter()
  const [isOpen, setOpen] = useState(false)

  return (
    <div className={`w-max text-xl ${className}`}>
      <MenuIcon
        className={`${isOpen ? 'hidden' : 'block'} md:hidden`}
        onClick={() => setOpen(true)}
      />
      <CloseIcon
        className={`${isOpen ? 'block' : 'hidden'} md:hidden`}
        onClick={() => setOpen(false)}
      />
      <ul
        className={`${isOpen ? 'flex flex-col' : 'hidden'} 
        fixed top-16 left-0 w-screen bg-green-100 border-white border-t-2 divide-y divide-white
        md:flex md:flex-row md:relative md:top-0 md:left-0 md:w-max md:border-t-0 md:divide-y-0`}
      >
        {menuItems.map(({ id, title, href }) => (
          <li key={id} className="flex flex-row mx-2 md:mx-0 md:ml-8">
            <Link href={href}>
              <a className="w-full py-2 px-2 md:py-0 md:px-0">
                <span
                  className={`w-min text-xl ${
                    href === router.pathname ||
                    (href !== '/' && router.pathname.includes(href))
                      ? 'text-green-500'
                      : ''
                  }`}
                >
                  {title}
                </span>
              </a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default MainNav
